<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>时间：{{ this.info.dataTime }}</span>
      </div>
      <div id="print-div" class="mainBox" style="height: 1100px">
        <div
          style="
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
          "
        >
          <img
            src="@/icons/img/changzhi.png"
            style="width: 30px; height: 30px"
          />{{ this.$store.state.City }}医院<br />
          ICU体力功能测试（PFIT）
        </div>
        <div class="warp">
          <div class="one">
            <div
              style="
                display: inline-flex;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                float: left;
                margin-left: 25px;
                margin-top: 4px;
              "
            >
              姓名：
              <span style="
                  width: 70px;
                  text-align: center;
                  border-bottom: 1px solid rgb(220, 222, 226);
                  height: 30px;
                  margin-right: 5px;
                "
              >{{ this.data.name }}</span>
              性别：
              <span
                style="
              width: 40px;
              text-align: center;
              border-bottom: 1px solid rgb(220, 222, 226);
              height: 30px;
              margin-right: 5px;
            "
              >{{ this.data.sex }}</span
              >
              年龄：
              <span style="
                    width: 60px;
                    text-align: center;
                    border-bottom: 1px solid rgb(220, 222, 226);
                    height: 30px;
                    margin-right: 5px;
                  "
              >{{ this.$store.state.user.severFall.ageOrMonthAge}}</span>
              床号：
              <span style="
              width: 60px;
              text-align: center;
              border-bottom: 1px solid rgb(220, 222, 226);
              height: 30px;
              margin-right: 5px;
            "
              >{{ this.data.bed_code }}</span>
              住院号：
              <span style="
              width: 150px;
              text-align: center;
              border-bottom: 1px solid rgb(220, 222, 226);
              height: 30px;
            "
              >{{ this.data.visit_id }}</span>
            </div>
          </div>
          <div class="two" style="height: 60px" id="select_div">
            <div class="long_div" style="height: 60px">评分</div>
            <div class="short_div" style="height: 60px">0</div>
            <div class="short_div" style="height: 60px">1</div>
            <div class="short_div" style="height: 60px">2</div>
            <div class="short_div" style="height: 60px">3</div>
            <div class="short_div" style="height: 60px">积分</div>
          </div>
          <div class="two">
            <div class="long_div">坐到站辅助程度</div>
            <div class="short_div">完全不能</div>
            <div class="short_div">2人辅助</div>
            <div class="short_div">1人辅助</div>
            <div class="short_div">独立进行</div>
            <div class="short_div">
              <el-select
                v-model="info.code1"
                placeholder=""
                :clearable="false"
                style="width: 140px; margin-top: 20px; text-align: center"
                @change="sum('code1', $event)"
              >
                <el-option
                  v-for="item in scoreList"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="two">
            <div class="long_div">*节奏（步/分钟）</div>
            <div class="short_div">完全不能</div>
            <div class="short_div">
              0-49<br />
              脚离地
            </div>
            <div class="short_div">50-80</div>
            <div class="short_div">80+</div>
            <div class="short_div">
              <el-select
                v-model="info.code2"
                placeholder=""
                :clearable="false"
                style="width: 140px; margin-top: 20px"
                @change="sum('code2', $event)"
              >
                <el-option
                  v-for="item in scoreList"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="two">
            <div class="long_div">
              肩臂肌力<br />
              （左/右）
            </div>
            <div class="short_div">0,1或2</div>
            <div class="short_div">3</div>
            <div class="short_div">4</div>
            <div class="short_div">5</div>
            <div class="short_div">
              <el-select
                v-model="info.code3"
                placeholder=""
                :clearable="false"
                style="width: 140px; margin-top: 20px; text-align: center"
                @change="sum('code3', $event)"
              >
                <el-option
                  v-for="item in scoreList"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="two">
            <div class="long_div">
              膝头肌力<br />
              （左/右）
            </div>
            <div class="short_div">0,1或2</div>
            <div class="short_div">3</div>
            <div class="short_div">4</div>
            <div class="short_div">5</div>
            <div class="short_div">
              <el-select
                v-model="info.scoreList"
                placeholder=""
                :clearable="false"
                style="width: 140px; margin-top: 20px; text-align: center"
                @change="sum('code4', $event)"
              >
                <el-option
                  v-for="item in scoreList"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="two" style="height: 60px">
            <div class="long_div" style="height: 60px">总分</div>
            <div class="longer_div" style="height: 60px">{{ info.score }}</div>
          </div>
          <div class="two">
            <div class="long_div">分数说明</div>
            <div class="longer_div">
              满分=12分<br />
              双侧测量，单侧的话测量好的那一侧
            </div>
          </div>
          <div class="two" style="height: 150px">
            <div class="long_div" style="height: 150px">测量说明</div>
            <div class="longer_div" style="height: 150px">
              特别是针对不能够从床边步行的患者<br />
              从坐到站所需的援助，0（完全不能）到3（不需援助）<br />
              肩关节屈曲和膝关节伸直量力（额定载牛津肌肉测试量表）<br />
              原地踏步（步数及以完成这些步数所需的时间）
            </div>
          </div>
        </div>
        <div style="text-align:center;margin-top: 1px;">第{{this.pageNum}}页</div>
      </div>

      <div
        style="
          position: fixed;
          right: 0;
          bottom: 0;
          z-index: 9;
          width: 100%;
          height: 56px;
          line-height: 56px;
          padding: 0 60px 0 18px;
          background: #fff;
          border-top: 1px solid #e8eaec;
          box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
        "
      >
        <el-button
          type="primary"
          style="position: absolute; right: 20px; top: 8px"
          @click="btn"
:disabled=garbage
          >保存</el-button
        >

        <el-button
          type="primary"
          style="position: absolute; right: 102px; top: 8px"
          @click="daying"
          :disabled=garbage
          >打印</el-button
        >
        <el-button
          type="primary"
          style="position: absolute; right: 185px; top: 8px"
          @click="reload"
          :disabled=garbage
          >刷新</el-button
        >

        <el-button
          type="primary"
          style="position: absolute; right: 270px; top: 8px"
          @click="histion()"
          :disabled=garbage
          >历史记录</el-button
        >
        <span style="position: absolute; right: 500px; top: 1px">
           设置页码：
        <input
          v-model="pageNum"
          autocomplete="off"
          spellcheck="false"
          type="text"
          placeholder=""
          oninput="value=value.replace(/[^0-9.]/g,'')"
          style="width: 100px;height: 30px;"
        />
        </span>
      </div>
      <el-drawer title="评估列表" :visible.sync="table" direction="rtl">
        <el-table :data="gridData">
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="80"
          />
          <el-table-column
            property="createTime"
            label="评估时间"
            width="150"
            align="center"
          />
          <el-table-column
            property="operatorCode"
            label="评估人"
            width="150"
            align="center"
          />
          <el-table-column label="操作" width="154" align="center">
            <template slot-scope="scope">
              <el-button
                slot="reference"
                size="mini"
                style="margin-left: 10px"
                type="primary"
                @click="choice(scope)"
                >选择</el-button
              >
              <el-popover
                :ref="`popover-${scope.$index}`"
                trigger="click"
                placement="top"
                width="100"
              >
                <p class="el-icon-warning">确定删除</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="no(scope)"
                    >取消</el-button
                  >
                  <el-button type="primary" size="mini" @click="yes(scope)"
                    >确定</el-button
                  >
                </div>
                <el-button
                  slot="reference"
                  size="mini"
                  style="margin-left: 10px"
                  type="danger"
                  >删除</el-button
                >
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </el-drawer>
    </el-card>
  </div>
</template>

<script>
import { printExcel } from "@/utils/config"; // 导入模块
import { jyxdPagePrint } from "@/utils/jyxd-page-printer.js";
import {
  patientgetList,
  ADLInsertAndUpdate,
  ADLDelete,
  queryDataADL,
  queryADLList, findPage,
} from "@/api/table";
import { Message } from "element-ui";
import { edit } from "../../api/table";
export default {
  data() {
    return {
      pageNum:1,
      garbage: false,
      age:"",
      printParam: {
        print_id: "print-div", //完整打印区域最外包裹, id名
        paper_height: "1240", //纸张长度，目前不自动分页，页面代码自行设计分页模式
        paper_width: "850", //纸张宽度，根据横向纵向调整，影响页面折行效果
        preview: "",
      },
      gridData: [],
      data: [],
      table: false,
      info: {
        rowId: "",
        code1: "",
        code2: "",
        code3: "",
        code4: "",
        score: "",
        type: "pfit_type",
        dataTime: "",
        patientId: "",
      },
      code1: 0,
      code2: 0,
      code3: 0,
      code4: 0,
      scoreList: [
        {
          id: "0",
          value: "0",
          label: "0",
        },
        {
          id: "1",
          value: "1",
          label: "1",
        },
        {
          id: "2",
          value: "2",
          label: "2",
        },
        {
          id: "3",
          value: "3",
          label: "3",
        },
      ],
    };
  },
  computed: {
    getData() {
      return this.$store.state.user.severFall;
    },
  },
  watch: {
    getData: {
      handler(nVal) {
        this.data = this.$store.state.user.severFall;
        if (this.$store.state.user.severFall == undefined) {
          this.$message({
            message: "请先选择病人",
            type: "warning",
          });
        } else {
          this.huli();
        }
      },
      deep: true,
    },
  },
    created() {
      this.data = this.$store.state.user.severFall;
            patientgetList({ visitId: this.data.visit_id }).then((res) => {
        if(res.data[0].age!==''){
          this.age = res.data[0].age;
        }
    });
  },
  mounted() {
    this.data = this.$store.state.user.severFall;
    if (
      typeof this.data.patient_id != "string" ||
      this.data.patient_id.length < 1
    ) {
      alert("请选择一次病人");
    } else {
      this.huli();
    }
                patientgetList({ visitId: this.data.visit_id }).then((res) => {
        if(res.data[0].age!==''){
          this.age = res.data[0].age;
        }
    });
  },
  methods: {
    //设置页码
    findPageByPatientId(){
      findPage({
        patientId: this.data.patient_id,
      }).then((res) => {
        if(res.data!=null  &&　res.data.length>0){
          this.pageNum=res.data[0].pageNum;
        }else{
          this.pageNum=1;
        }
      });

    },
    huli() {
      this.data = this.$store.state.user.severFall;
      this.info.patientId = this.data.patient_id;
      this.info = {
        rowId: "",
        code1: "",
        code2: "",
        code3: "",
        code4: "",
        score: "",
        type: "pfit_type",
        dataTime: "",
        patientId: "",
      };
      this.code1 = 0;
      this.code2 = 0;
      this.code3 = 0;
      this.code4 = 0;
      this.getNowDate();
      if (
        this.data.unplanned == "" ||
        this.data.unplanned == null ||
        this.data.unplanned == 0
      ) {
        this.garbage = true;
        alert('请在首页补全患者信息')
        // this.$message({
        //   message: "请在首页补全患者信息",
        //   type: "warning",
        //   duration: 1500,
        // });
        return;
      } else {
        this.garbage = false;
      }
      this.findPageByPatientId();
    },
    sum(type, value) {
      console.log(this.code1,"1111111111111")
      console.log(this.code2,"222222222222")
      console.log(this.code3,"333333333333333")
      console.log(this.code4,"44444444444444")
      var codeValue = value;
      if (type.indexOf("code1") != -1) {
        this.code1 = codeValue;
      } else if (type.indexOf("code2") != -1) {
        this.code2 = codeValue;
      } else if (type.indexOf("code3") != -1) {
        this.code3 = codeValue;
      } else if (type.indexOf("code4") != -1) {
        this.code4 = codeValue;
      }
      this.info.score =
        Number(this.setValue(this.code1)) +
        Number(this.setValue(this.code2)) +
        Number(this.setValue(this.code3)) +
        Number(this.setValue(this.code4));
    },
    //赋值0
    setValue(val) {
      if (val == "") {
        val = 0;
      }
      return val;
    },
    getNowDate() {
      var date = new Date();
      // 年
      var year = date.getFullYear();
      // 月
      var month = date.getMonth() + 1;
      // 日
      var day = date.getDate();
      // 时
      var hh = date.getHours();
      // 分
      var mm = date.getMinutes();
      // 秒
      var ss = date.getSeconds();
      if (Number(month) < 10) {
        month = "0" + month;
      }
      if (Number(day) < 10) {
        day = "0" + day;
      }
      if (Number(hh) < 10) {
        hh = "0" + hh;
      }
      if (Number(mm) < 10) {
        mm = "0" + mm;
      }
      if (Number(ss) < 10) {
        ss = "0" + ss;
      }
      this.info.dataTime =
        year + "-" + month + "-" + day + " " + hh + ":" + mm + ":" + ss;
    },
    //打印
    daying() {
      if (
        typeof this.data.patient_id != "string" ||
        this.data.patient_id.length < 1
      ) {
        alert("请选择一次病人");
      } else {
        jyxdPagePrint(this.printParam);
      }
    },
    //保存
    btn() {
      if (
        typeof this.data.patient_id != "string" ||
        this.data.patient_id.length < 1
      ) {
        alert("请选择一次病人");
      } else {
        if (!this.info.patientId) {
          this.info.patientId = this.data.patient_id;
        }
        ADLInsertAndUpdate(this.info).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: "保存成功",
              type: "success",
              duration: 1500,
            });
          } else {
            this.$message({
              message: "保存失败",
              type: "warning",
              duration: 1500,
            });
          }
        });
      }
    },
    // 刷新
    reload() {
      if (
        typeof this.data.patient_id != "string" ||
        this.data.patient_id.length < 1
      ) {
        alert("请选择一次病人");
      } else {
        this.huli();
      }
    },
    //查看历史记录
    histion() {
      if (
        typeof this.data.patient_id != "string" ||
        this.data.patient_id.length < 1
      ) {
        alert("请选择一次病人");
      } else {
        this.table = true;
        if (this.data.patient_id) {
          queryADLList({
            type: "pfit_type",
            patientId: this.data.patient_id,
          }).then((res) => {
            this.gridData = res.data;
          });
        }
      }
    },
    // 选择
    choice(scope) {
      const ids = scope.row.rowId;
      queryDataADL({
        status: 1,
        patientId: this.data.patient_id,
        rowId: ids,
        type: "pfit_type",
      }).then((res) => {
        console.log(res.data);
        if (res.code === 200) {
          this.info = res.data;
          this.code1=res.data.code1;
          this.code2=res.data.code2;
          this.code3=res.data.code3;
          this.code4=res.data.code4;
          this.$message({
            message: "选择成功",
            type: "success",
            duration: 1500,
          });
        } else {
          this.$message({
            message: "选择失败",
            type: "warning",
            duration: 1500,
          });
        }
      });
    },
    //删除
    yes(scope) {
      ADLDelete({
        rowId: scope.row.rowId,
      }).then((res) => {
        this.$message({
          message: "删除成功",
          type: "success",
          duration: 1500,
        });
        this.histion();
      });
      scope._self.$refs[`popover-${scope.$index}`].doClose();
    },
    //取消删除
    no(scope) {
      this.$message("取消删除");
      scope._self.$refs[`popover-${scope.$index}`].doClose();
    },
  },
};
</script>

<style scoped>
::v-deep .el-tag .el-icon-close {
  width: 0;
  height: 0;
  display: none;
}
::v-deep .el-tag .el-icon-close::before {
  width: 0;
  height: 0;
  display: none;
}
::v-deep .el-tag--small {
  padding: 0;
  color: black;
}
::v-deep .el-input__icon {
  line-height: 32px !important;
}
::v-deep .el-input__inner {
  height: 30px !important;
  width: 100%;
  padding-left: 2px;
}
::v-deep .el-input__icon.el-icon-time {
  display: none;
  width: 0;
  height: 0;
}
::v-deep .el-select__caret.el-input__icon.el-icon-arrow-up {
  display: none;
  width: 0;
  height: 0;
}
.warp {
  width: 940px;
  height: auto;
  border: 1px solid #808695;
  margin: 0 auto;
}
.one {
  width: 940px;
  height: 50px;
  border-bottom: 1px solid #808695;
}
.one /deep/ .el-input__inner {
  width: 50px !important;
}
.two {
  width: 940px;
  height: 120px;
  border-bottom: 1px solid #808695;
}
.two /deep/ .el-input__inner {
  border: none;
  width: 120px;
  float: left;
  text-align: center;
}

.one /deep/ .el-input__inner {
  border: none;
  width: 120px;
}
/deep/.el-radio__input.el-radio__inner {
  margin-left: 0px;
}
.short_div {
  width: 140px;
  height: 120px;
  line-height: 20px;
  border-right: 1px solid #808695;
  float: left;
  padding-top: 15px;
  text-align: center;
}
.long_div {
  width: 240px;
  height: 120px;
  line-height: 30px;
  border-right: 1px solid #808695;
  float: left;
  padding-top: 15px;
  text-align: center;
}
.longer_div {
  width: 700px;
  height: 120px;
  line-height: 30px;
  border-right: 1px solid #808695;
  float: left;
  padding-top: 15px;
  text-align: center;
}
#select_div /deep/ input.el-input__inner {
  width: 140px;
  height: 20px;
  border: none;
}
#select_div /deep/ .el-icon-arrow-up:before {
  content: "";
}
</style>

